<template>
  <div class="row-center menu-container">
    <div style="width: 260px;">
      <div class="w100 menu-container_box box-shadow">
        <div v-for="(item, index) in tabList" :key="item.path">
          <!-- 一级菜单 -->
          <div
              v-if="!['我的服务商管理'].includes(item.name) || userInfo.isCompanyService!= 0"
              class="fw500 showMouse relposition row-start level1-menu-border"
              :class="isItemActive(item) ?  ['color-white', 'level1Menu']: 'color-text'"
              style="height: 54px; align-items: center;"
              @click="mouseEnter(item)"
          >
            <i :class="item.icon" class="menuIcon"/>
            {{ item.name }}
             <!-- <i v-if="item?.children?.filter(v => !v.hidden).length > 0" class="arrowIcon" :class="item.childShow ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" /> -->
          </div>
            <!-- 二级菜单 -->
            <template v-if="item.name !== '我的服务商管理' || userInfo.isServiceApplySubmit === 1">
              <div v-for="(child, childIndex) in (item.children || []).filter(child => !child.hidden)" :key="child.path">
                <div
                  v-if="(child.name === '服务产品管理' && userInfo.isServiceApplySubmit === 1) || (child.name !== '服务产品管理')"
                  class="child fw500 showMouse fs-sm"
                  :key="childIndex"
                  :class="[child.name === $route.name || child.child?.includes(name) ? 'secondMemu' : '']"
                  @click="mouseEnter(child)"
                >
                  <i class="el-icon-help"></i> {{ child.name }}
                </div>
              </div>
            </template>
        </div>
      </div>
    </div>
    <div style="width: calc(100% - 295px);max-width:1422px;margin-left:30px">
      <div class="w100 box-shadow content-box">
        <slot name="content"/>
      </div>
    </div>
      <!-- 需要认证提示 -->
      <el-dialog title="提示" :visible.sync="tipVisible" width="525px" custom-class="my-dialog">
        <p style="margin-top: -10px;">需要完成<span
            style="color: #436AF7;">"企业信息认证"</span>才可进行相关操作。</p>
        <div style="text-align: right;margin-top: 40px;">
          <el-button type="info" size="medium" @click="tipVisible = false">暂不认证</el-button>
          <el-button type="primary" size="medium" class="blue-btn"
            @click="() => { tipVisible = false; goToAuth() }">前往认证</el-button>
        </div>
      </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      tipVisible: false,
      tabList: [
        {
          name: '个人中心',
          path: 'profile',
          icon: 'iconfont icon-yonghu',
          hidden: false,
          children: []
        },
        {
          name: '我的企业管理',
          path: 'couponApply',
          icon: 'el-icon-office-building',
          hidden: false,
          children: [
            {
              path: 'couponApply',
              name: '服务券配额申请',
              hidden: false,
            },
            {
              path: 'couponOrder',
              name: '我购买的服务',
              hidden: false,
            },
            {
              path: 'serviceCompanyApply',
              name: '申请入驻平台',
              hidden: false,
            },
            {
              path: 'serviceCompanyInfo',
              name: '服务商信息',
              hidden: false,
            },
            {
              path: 'requirementManage',
              name: '我的需求管理',
              hidden: false,
            },
          ]
        },
        {
          name: '我的服务商管理',
          path: 'serviceCompanyInfo',
          icon: 'el-icon-s-shop',
          hidden: false,
          children: [
            {
              path: 'serviceProductManage',
              name: '服务产品管理',
              hidden: false,
            },
            {
              path: 'serviceProductPreview',
              name: '服务产品上架预览',
              hidden: true,
            },
            {
              path: 'productOrder',
              name: '我的服务订单',
              hidden: false,
            },
            {
              path: 'couponExchange',
              name: '服务券兑付',
              hidden: false,
            }
          ]
        },
        {
          name: '我的收藏',
          path: 'myColletion',
          icon: 'el-icon-star-off',
          hidden: false,
          children: []
        },
        // {
        //   name: '后台管理',
        //   path: 'couponApplyExamine',
        //   icon: 'el-icon-coin',
        //   childShow: false,
        //   children: []
        // },
      ]
    }
  },
  created() {
    // 默认展开
    // this.tabList.forEach(item => {
    //   if (item.children?.length > 0) {
    //     item.children.forEach(child => {
    //       if (child.name === this.$route.name) {
    //         item.childShow = true
    //       }
    //     })
    //   }
    // })
  },
  computed: {
    isItemActive() {
      let self = this
      return function (item) {
        if (item.name === self.$route.name) {
          return true
        }
        if ( item?.children.length > 0) {
          let index = item.children.findIndex(i => i?.name === self.$route.name)
          return index >= 0
        }
      }
    },
    ...mapGetters([
      'userInfo'
    ]),
  },
  methods: {
    mouseEnter(item = {}) {
    if (this.userInfo.isCompanyAuth === 0 && (item.name === '服务券配额申请' || item.name === '我购买的服务' || item.name === '申请入驻平台' || item.name === '服务商信息' || item.name === '我的需求管理')) {
        this.tipVisible = true;
    } else {
       // 如果有子菜单，则导航到第一个子菜单项
        if (item.children && item.children.length > 0  && this.$route.name !== item.children[0].name) {
          this.$router.push({
            name: item.children[0].name
          });
        } else if (this.$route.name !== item.name && !(item.name == '我的企业管理' || item.name == '我的服务商管理')) {
          // 没有子菜单，且路径不同，则进行跳转
          this.$router.push({
            name: item.name
          });
        }
      }
      // console.log('this.path',this.tabList,this.userInfo.isCompanyService)
    },
    goToAuth() {
      // 如果当前路径是个人中心，则跳转到认证页面，否则关闭对话框
      if (this.$route.name === '个人中心') {
         this.tipVisible = false
      } else {
         this.$router.push({name: '个人中心'})
      }
    }
  }
}
</script>
<style scoped lang="scss">
@import "@/assets/css/element-variables";

.menu-container {
  position: relative;
  box-sizing: border-box;
  padding: 40px 157px 40px 157px;
  font-size: $font-size-md;

  &_box {
    min-height: 80vh;
  }
}
.level1-menu-border{
  border-top: 6px solid #F7F8FA;
}
.level1Menu {
  background: $--color-primary;
}

.level1Menu::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: $--color-primary;
}

.menuIcon {
  font-size: 18px;
  margin: 0 18px;
}

.arrowIcon {
  font-size: $font-size-md;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

.content-box {
  overflow-x: hidden;
  overflow-y: auto;
  height: 80vh;
  min-height: 80vh;
}

.content-box::-webkit-scrollbar {
  display: none;
}

.child {
  height: 54px;
  padding-left: 54px;
  line-height: 54px;
  color: #7686A3;
  border-top: 1px solid #fff;
}
.secondMemu {
  background: #F7F8FA;
  color: #436AF7;
  font-size: 14px;
}

</style>
